<template>
    <bs-dialog class="choice-template" :title="editData.id ? $t('编辑模板') : $t('添加模板')" :visible.sync="editor" size="small" @closed="doCloseEdit">
        <template slot="main">
            <div v-if="editor">
                <media-template :twidget-data="editData" @save="doSave"></media-template>
            </div>
        </template>
    </bs-dialog>
</template>

<script>
import MediaTemplate from '../../components/MediaTemplate'

export default {
    data() {
        return {
            editor: false,
            editData: {}
        }
    },
    components: {
        MediaTemplate
    },
    created() {
        this.$eventBus.$on('showTemplateDialog', this.show)
        this.$eventBus.$on('closeTemplateDialog', this.doCloseEdit)
    },
    beforeDestroy() {
        this.$eventBus.$off('showTemplateDialog')
        this.$eventBus.$off('closeTemplateDialog')
    },
    mounted() {
        this.$nextTick(function() {
        })
    },
    methods: {
        show(data) {
            this.editData = data
            this.editor = true;
        },
        // 关闭
        doCloseEdit: function () {
            this.editor = false
        },
        //保存
        doSave(saveData) {
            this.$eventBus.$emit('doSaveTemplate', saveData)
        }
    }
}
</script>

<style lang="scss" scoped>
.choice-template {
    ::v-deep .el-dialog__body {
        padding: 0 !important;
    }
    ::v-deep .el-dialog {
        height: 700px !important;
    }
    ::v-deep .el-dialog__footer {
        padding: 0px !important;
        border-top: 0px !important;
    }
}
</style>